<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title></title>
<!--框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->

<style type="text/css">
#container{width:940px;margin:50px auto;}
#container ul{width:300px;list-style:none;float:left;margin-right:20px;}
#container ul li{margin-bottom:20px;}
#container ul li img{width:300px;}
</style>
</head>
<style>
		
</style>
<body>
 <div class="page_content">
<div id="container">

	<ul class="col">
		<li>
		<img src="../../libs/images/demo/gallery/1.jpg" alt=""/>
		<p>1.jpg</p>
		</li>
		<li><img src="../../libs/images/demo/gallery/2.jpg" alt=""/><p>2.jpg</p></li>
		<li><img src="../../libs/images/demo/gallery/3.jpg" alt=""/><p>3.jpg</p></li>
	</ul>
	<ul class="col"></ul>
	<ul class="col" style="margin-right:0"></ul>
	
</div>
<script type="text/javascript">
$(function(){
	//url data function dataType
	function loadMeinv(){
		var data = 0;
		for(var i=0;i<11;i++){//每次加载时模拟随机加载图片
			data = parseInt(Math.random()*9+1);
			var html = "";
			html = '<li><img src = ../../libs/images/demo/gallery/'
					+data+'.jpg><p>src='
					+data+'.jpg</p></li>';
			$minUl = getMinUl();
			$minUl.append(html);
		}
	}
	loadMeinv();
	$(window).on("scroll",function(){
		$minUl = getMinUl();
		if($minUl.height() <= $(window).scrollTop()+$(window).height()){
		//当最短的ul的高度比窗口滚出去的高度+浏览器高度大时加载新图片
			loadMeinv();
		}
	})
	function getMinUl(){//每次获取最短的ul,将图片放到其后
		var $arrUl = $("#container .col");
		var $minUl =$arrUl.eq(0);
		$arrUl.each(function(index,elem){
			if($(elem).height()<$minUl.height()){
				$minUl = $(elem);
			}
		});
		return $minUl;
	}
})
</script>
  
  </div>
</body>
</html>